<template>
  <div class="text-container">
    <el-tabs v-model="activeName">
      <el-tab-pane label="内容" name="first">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>文本内容</span>
            </div>
          </template>
          <el-input v-model="data.option.content" :rows="6" type="textarea" />
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="样式" name="second">
        <el-card class="box-card">
          <el-divider content-position="left">字体大小(px)</el-divider>
          <el-slider v-model="styleObj.fontSize" show-input :min="12" :max="56" />

          <el-divider content-position="left">字体颜色</el-divider>
          <el-color-picker v-model="styleObj.color" />

          <el-divider content-position="left">文本格式</el-divider>
          <el-radio-group v-model="styleObj.textAlign" class="ml-4">
            <el-radio-button label="left">不居中</el-radio-button>
            <el-radio-button label="center">居中</el-radio-button>
          </el-radio-group>

          <Common :data="data"></Common>
        </el-card>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script setup>
import { onBeforeMount } from 'vue'
defineOptions({
  name: 'TextCompontent',
  inheritAttrs: false
})

const props = defineProps({
  data: {
    type: Object
  }
})

const { data } = toRefs(props)

onBeforeMount(() => {
  const { style } = data.value
  if (Object.keys(data.value.style).length !== 0) {
    styleObj.color = style?.color ? style.color : '#000'
    styleObj.textAlign = style?.textAlign ? style.textAlign : 'left'
    styleObj.fontSize = style?.fontSize ? Number(style.fontSize.replace('px', '')) : 16
  }

  watch(() => styleObj, (value) => {
    if (value) {
      data.value.style = {
        fontSize: value.fontSize + 'px',
        color: value.color,
        textAlign: value.textAlign
      }
    }
  }, { deep: true })
})

const styleObj = reactive({
  fontSize: 16,
  color: '#000',
  textAlign: 'left'
})

const activeName = ref('first')
</script>
<style lang="scss" scoped>
</style>
